<template>
  <view class="bg-box">
    <u-gap class="gap-style" height="24" bg-color="#f4f5f7"></u-gap>
    <view class="item" @click="jump">
      <view class="logo-text">
        <u-image
          class="logo"
          :src="props.data?.logoUrl"
          width="36rpx"
          height="36rpx"
        >
        </u-image>
        <view class="text u-line-1">{{ props.data?.supplierName }}</view>
        <view
          class="status"
          :class="`${stateName === '交易完成' ? 'status-1' : 'status-2'} ${
            stateName === '已取消' ? 'status-3' : ''
          }`"
          >{{ stateName }}</view
        >
      </view>
      <view
        class="img-box"
        v-for="item in props.data?.orderDetails?.slice(0, 2)"
        :key="item"
      >
        <u-image
          class="cover"
          :src="item.skuImageUrl"
          width="128rpx"
          height="128rpx"
        >
          <template #error>
            <u-image
              class="empty-img"
              src="@/static/images/img-empty.jpg"
              width="80rpx"
              height="80rpx"
              :show-loading="false"
              :fade="false"
            >
            </u-image>
          </template>
        </u-image>
        <view class="word-box">
          <view class="top-text">
            <view class="title u-line-2">
              {{ item?.skuName }}
              <text v-if="item?.skuSpec">{{ '  ' + item?.skuSpec }}</text>
            </view>
            <view class="number" v-if="item.isStandard === 0"
              >{{ item?.actualNum }}{{ item?.priceUnit }}</view
            >
            <view class="number" v-if="item.isStandard === 1"
              >x{{ item?.actualNum }}</view
            >
            <view class="number" v-if="item.isStandard === null"
              >x{{ item?.actualNum }}</view
            >
          </view>
          <view class="bottom-text">
            <view class="price-1" v-if="item?.goodsPrice !== null">
              <text class="u-text-1">¥</text>
              <text class="u-text-2">{{ item?.goodsPrice }}</text>
              <text class="u-text-3" v-if="item?.priceUnit !== null"
                >/{{ item?.priceUnit }}</text
              >
            </view>
          </view>
        </view>
      </view>
      <view
        style="padding: 24rpx 0 0"
        v-if="props.data.orderDetails.length > 2"
      >
        <nav-bar>
          <view style="width: 100%; text-align: center">查看更多</view>
        </nav-bar>
      </view>
      <view class="btn-order-box">
        <u-button
          class="btn-style btn-style-1"
          @click.stop="cancelShow(props.data.orderNumber)"
          v-if="
            props.data.orderStatus === 'NON_CONFIRM' ||
            props.data.orderStatus === 'NON_RECEIPT'
          "
          >取消订单</u-button
        >
        <u-button
          class="btn-style btn-style-2"
          type="primary"
          v-if="props.data.orderStatus === 'NON_CONFIRM'"
          @click.stop="jump"
          >确认订单</u-button
        >
        <u-button
          class="btn-style btn-style-2"
          type="primary"
          v-if="props.data.orderStatus === 'EXAMINE_REJECT'"
          @click.stop="onceOrder"
          >再来一单</u-button
        >
        <u-button
          class="btn-style btn-style-2"
          type="primary"
          v-if="props.data.orderStatus === 'NON_RECEIVED'"
          @click.stop="jump"
          >确认收货</u-button
        >
      </view>
    </view>
  </view>
</template>
<script setup>
import { computed, inject } from 'vue'
import { tabList, tabType } from '../const.js'
import { getOrderDetail } from '@/api/api'

const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  }
})

const stateName = computed(() => {
  return tabType[props.data.orderStatus]
})

const showTrack = computed(() => {
  if (
    props.data.orderStatus === 'NON_RECEIVED' ||
    props.data.orderStatus === 'COMPLETED'
  ) {
    return props.data.deliveryType === 'YLZ_DELIVER'
  }
  return false
})

const cancelShow = inject('cancelShow')

const jump = () => {
  uni.navigateTo({
    url: `/subPackages/pages/order/detail?id=${props.data.orderNumber}`
  })
}
const jumpTrack = () => {
  uni.navigateTo({
    url: `/pages/order/track?id=${props.data.orderNumber}`
  })
}
async function onceOrder() {
  const rep = await getOrderDetail({ orderNumber: props.data.orderNumber })
  const newData = {
    supplierName: rep.data.supplierName,
    supplierCreditCode: rep.data.supplierCreditCode,
    supplierLogo: rep.data.logoUrl,
    deliveryType: rep.data.deliveryType,
    settlementMethod: rep.data.settlementMethod,
    supplierTenantId: rep.data.supplierTenantId,
    goods: rep.data.orderDetails.map((i) => {
      return {
        images: i.skuImageUrl || '',
        quantity: i.actualNum,
        price: i.actualPrice,
        skuId: i.inSkuId,
        productName: i.skuName,
        unit: i.priceUnit
      }
    })
  }
  const goodsInfo = JSON.stringify([newData])
  uni.navigateTo({
    url: `/subPackages/pages/order/confirm?goodsInfo=${goodsInfo}`
  })
}
</script>
<style lang="scss" scoped>
.bg-box {
  background-color: #f4f5f7;
}
.item {
  padding: 32rpx;
  border-radius: 16rpx;
  background: #fff;
  > .logo-text {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    .logo {
      border-radius: 6rpx;
      overflow: hidden;
      width: 36rpx;
      height: 36rpx;
      margin-right: 8rpx;
    }
    .text {
      font-weight: 400;
      font-size: 28rpx;
      line-height: 44rpx;
      color: #262626;
      margin-right: 26rpx;
      width: 502rpx;
    }
    .status {
      font-weight: 400;
      width: 112rpx;
      font-size: 28rpx;
      line-height: 44rpx;
      color: #4fb91c;
      text-align: right;
      &.status-1 {
        color: #4fb91c;
      }
      &.status-2 {
        color: #fb7826;
      }
      &.status-3 {
        color: #8a8a8a;
      }
    }
  }

  > .img-box {
    width: 343 * 2rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 32rpx;
    .cover {
      width: 128rpx;
      height: 128rpx;
      border-radius: 16rpx !important;
      overflow: hidden !important;
    }
    .word-box {
      width: 271 * 2rpx;
      height: 64 * 2rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .top-text {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        margin-bottom: 16rpx;
        .title {
          width: 247 * 2rpx;
          font-weight: 600;
          font-size: 28rpx;
          color: #262626;
          flex: 1;
        }
        .number {
          font-weight: 400;
          font-size: 28rpx;
          line-height: 44rpx;
          color: #8a8a8a;
          flex-wrap: nowrap;
          white-space: nowrap;
          margin-left: 16rpx;
        }
      }
      .bottom-text {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        .price-1 {
          .u-text-1 {
            font-weight: 400;
            font-size: 24rpx;
            line-height: 40rpx;
            color: #8a8a8a;
          }
          .u-text-2 {
            font-weight: 400;
            font-size: 28rpx;
            line-height: 44rpx;
            color: #8a8a8a;
            margin-left: 4rpx;
            margin-right: 8rpx;
          }
          .u-text-3 {
            font-weight: 400;
            font-size: 28rpx;
            line-height: 44rpx;
            color: #8a8a8a;
          }
        }

        .price-2 {
          .u-text-1 {
            font-weight: 600;
            font-size: 28rpx;
            line-height: 44rpx;
            color: #262626;
          }
          .u-text-2 {
            font-weight: 600;
            font-size: 24rpx;
            line-height: 40rpx;
            color: #262626;
            margin-left: 8rpx;
            margin-right: 4rpx;
          }
          .u-text-3 {
            font-weight: 600;
            font-size: 28rpx;
            line-height: 44rpx;
            color: #262626;
          }
        }
      }
    }
  }
  > .btn-order-box {
    width: 343 * 2rpx;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .btn-style {
      margin: 32rpx 0 0 32rpx;
      // padding: 10rpx 32rpx;
      border-radius: 8rpx;
      font-size: 28rpx;
      font-weight: 400;
    }
  }
  .mr-32 {
    margin-right: 32rpx;
  }
}
</style>
